<template>
    <el-dialog
    :title="title"
    :visible.sync="show"
    width="70%"
    top="2vh"
    append-to-body
    :before-close="close">
        <el-table  border :data="list"  :span-method="objectSpanMethod">
                <el-table-column align="center" label="服务名称" prop="serviceName"></el-table-column>
                <el-table-column label="服务项目" prop="serviceDetailName"></el-table-column>
                <el-table-column label="单位" prop="unit"></el-table-column>
                <el-table-column label="次数" prop="serviceNum"></el-table-column>
                <el-table-column align="center" label="服务费用" prop="actualTotalAmount"></el-table-column>
                <el-table-column align="center" label="备注" prop="remark" show-overflow-tooltip></el-table-column>
        </el-table>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: String,
    visible: Boolean,
    data: Array
  },
  watch: {
    visible: {
      handler (val) {
        this.show = val
      },
      immediate: true
    },
    show (val) {
      this.$emit('update:visible', val)
    },
    data: {
      handler (val) {
        if (val) {
          this.list = this.transferData(val)
          this.getSpanArr(this.list, 'serviceCode')
        }
      },
      deep: true,
      immediate: true
    }
  },
  components: {},
  data () {
    return {
      show: false,
      list: [],
      pos: 0,
      spanArr: []
    }
  },
  methods: {
    close () {
      this.show = false
    },
    getSpanArr (data, key) {
      this.spanArr = []
      if (data === null) {
        return
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          if (data[i][key] === data[i - 1][key]) {
            this.spanArr[ this.pos ] += 1// 合并行数
            this.spanArr.push(0)// 新增一个被合并行 0表示要合并
          } else {
            this.spanArr.push(1)// 否则不合并
            this.pos = i// 指向位移
          }
        }
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 4 || columnIndex === 5) {
        const rowSpan = this.spanArr[rowIndex]
        const colSpan = rowSpan > 0 ? 1 : 0
        return {
          rowspan: rowSpan,
          colspan: colSpan // 相当于给给表格加上rowspan,colspan属性
        }
      }
    },
    transferData (data) {
      const list = []
      data.forEach(item => {
        const serviceName = item.serviceName
        const serviceCode = item.serviceCode
        const actualTotalAmount = item.actualTotalAmount
        const remark = item.remark
        const salesServiceDetailInfoList = item.salesServiceDetailInfoList
        if (salesServiceDetailInfoList && salesServiceDetailInfoList.length > 0) {
          for (let index = 0; index < salesServiceDetailInfoList.length; index++) {
            const serviceDetailName = salesServiceDetailInfoList[index]['serviceDetailName']
            const unit = salesServiceDetailInfoList[index]['unit']
            const serviceNum = salesServiceDetailInfoList[index]['serviceNum']
            list.push({serviceCode, serviceName, actualTotalAmount, remark, serviceDetailName, serviceNum, unit})
          }
        }
      })
      return list
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
